<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>基本使用</title>
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body>
  <div class="container">
    <h2 class="page-header">基本使用</h2>
    <button class="btn btn-primary"> 发送GET请求 </button>
    <button class="btn btn-warning"> 发送POST请求 </button>
    <button class="btn btn-success"> 发送PUT请求 </button>
    <button class="btn btn-danger"> 发送DELETE请求 </button>
    <br/>
    <br/>
    <button class="btn btn-primary"> 发送request-GET请求 </button>
    <button class="btn btn-warning"> 发送POST请求 </button>
    <button class="btn btn-success"> 发送 默认配置 请求 </button>
  </div>
  <div id="image"></div>
  <div class="box"></div>
  <script>
    function loadImage(src, resolve, reject) {
      const image = new Image();
      image.src = src;
      image.onload = ()=>{
        resolve(image)
      };
      image.onerror = reject;
    }
    // loadImage("https://oss.sceneconsole.cn/user/fictitious/1617954071139.jpg", 
    // (image) => {
    //   console.log("图片加载完成")
    //   document.getElementById('image').appendChild(image)
    // }, () => {
    //   console.log("加载失败")
    // })
    // console.log("执行")

    function interval(callback, delay) {
      // 返回值是定时器id
      let id = setInterval(() => callback(id), delay)
    }
    // interval(function(id) {
    //   console.log(id);
    // }, 1000)

    interval((timeId) => {
      const oBox = document.getElementsByClassName('.box')[0]
      console.log(oBox)
    }, 2000)

    // 获取按钮
    const btns = document.querySelectorAll('button');
    // 第一个
    btns[0].onclick = function() {
      // 发送ajax请求
      axios({
        // 请求类型
        method: 'GET',
        url: 'http://localhost:3000/posts/2',
      }).then(response => {
        console.log(response)
      })
    }
    // 添加一篇新的文章
    btns[1].onclick = function() {
      // 发送ajax请求
      axios({
        // 请求类型
        method: 'POST',
        url: 'http://localhost:3000/posts',
        // 设置请求体
        data: {
          title: "今天天气不错",
          author: '张三'
        }
      }).then(response => {
        console.log(response)
      })
    }
    // 更新
    btns[2].onclick = function() {
      // 发送ajax请求
      axios({
        // 请求类型
        method: 'PUT',
        url: 'http://localhost:3000/posts/3',
        // 设置请求体
        data: {
          title: "今天天气不错",
          author: '李四'
        }
      }).then(response => {
        console.log(response)
      })
    }
    // 删除数据
    btns[3].onclick = function() {
      // 发送ajax请求
      axios({
        // 请求类型
        method: 'delete',
        url: 'http://localhost:3000/posts/3',
      }).then(response => {
        console.log(response)
      })
    }
    // 发送GET请求
    btns[4].onclick = function() {
      // 发送ajax请求
      axios.request({
        // 请求类型
        method: 'GET',
        url: 'http://localhost:3000/comments',
      }).then(response => {
        console.log(response)
      })
    }
    // 发送POST请求
    btns[5].onclick = function() {
      // 发送ajax请求
      axios.post('http://localhost:3000/comments', 
        {
          "body": "吴心上班",
          "postId": 2
        }).then(response => {
        console.log(response)
      })
    }

    // 默认配置
    axios.defaults.method = 'GET'; // 设置默认的请求类型为GET
    axios.defaults.baseURL = 'http://localhost:3000'; // 设置基础URL
    // axios.defaults.params = { id: 100 }
    axios.defaults.timeout = 3000

    btns[6].onclick = function() {
      // 发送ajax请求
      axios({url: '/posts'}).then(response => {
        console.log(response)
      })
    }
  </script>
</body>
</html>